<template>
  <view class="login">
    <image class="bg-top" src="/static/login/2.png"></image>
    <image class="bg-footer" src="/static/login/3.png"></image>
    <view class="login-content">
      <view class="login-title">欢迎使用粤安教育学习平台!</view>
      <view class="login-phone">
        <image src="/static/login/sj.png" mode="widthFix"></image>
        <text class="line"></text>
        <input
          placeholder="请输入手机号"
          placeholder-style="color:#000"
          type="number"
          value="" />
      </view>
      <!-- <view class="login-psw">
				<image src="/static/login/yz.png" mode="widthFix"></image>
				<text class="line"></text>
				<input placeholder="请输入验证码" placeholder-style="color:#000" type="number" value="" />
				<view class="login-send">发送短信</view>
			</view> -->
      <view class="login-psw">
        <image src="/static/login/yz.png" mode="widthFix"></image>
        <text class="line"></text>
        <input
          placeholder="请输入密码"
          placeholder-style="color:#000"
          type="number"
          value="" />
      </view>

      <view @click="onLogin" class="login-button">登录</view>

      <button
        open-type="getPhoneNumber"
        @getphonenumber="onGetPhoneNumber"
        class="login-wechat">
        <image src="../../static/login/wx.png" mode=""></image>
        <text>微信登陆</text>
      </button>
      <!-- <button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" class="login-wechat">
				<image src="../../static/login/wx.png" mode=""></image>
				<text>一键登录</text>
			</button> -->
    </view>
  </view>
</template>

<script>
import { fetchGetPhone } from '@/services/user.js'
export default {
  data() {
    return { code: '' }
  },
  onLoad() {
    // uni.login({
    // 	success: resp => {
    // 		console.log(resp);
    // 		this.code = resp.code;
    // 		// wechatLogin({ code: resp.code, userInfo: {} });
    // 	}
    // });
  },
  methods: {
    onLogin() {
      uni.switchTab({
        url: '/pages/index/index',
      })
    },
    async onGetPhoneNumber({ detail }) {
      await fetchGetPhone({
        code: detail.code,
      })
      this.$store.commit('setLoginState', true)
      // uni.switchTab({
      //   url: '/pages/index/index',
      // })
      setTimeout(() => {
        uni.navigateBack({})
      }, 1000)
    },
  },
  onShareAppMessage() {},
}
</script>

<style scoped lang="scss">
.login {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .bg-top {
    width: 754rpx;
    height: 594rpx;
    position: fixed;
    right: -87rpx;
    top: -388rpx;
  }
  .bg-footer {
    width: 535rpx;
    height: 594rpx;
    position: fixed;
    bottom: -300rpx;
    left: -200rpx;
  }

  .login-content {
    width: 620rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .login-title {
      font-weight: 600;
      width: 100%;
      font-size: 42rpx;
      margin-bottom: 80rpx;
    }
    .login-phone,
    .login-psw {
      position: relative;
      padding: 0 33rpx 0 33rpx;
      height: 100rpx;
      line-height: 100rpx;
      margin-bottom: 54rpx;
      background: #f8f7fc;
      border: 2rpx solid #e9e9e9;
      font-size: 30rpx;
      border-radius: 54rpx;
      width: 100%;
      display: flex;
      align-items: center;
      image {
        width: 44rpx;
        height: 44rpx;
      }

      .login-send {
        &::after {
          content: '';
          position: absolute;
          height: 30rpx;
          width: 1rpx;
          left: -10rpx;
          background-color: #000;
        }
        font-size: 30rpx;
        position: absolute;
        right: 20rpx;
        width: 150rpx;
        height: 60rpx;
        top: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        // background-color: #5677fc;
        color: #000;
        border-radius: 54rpx;
      }
    }

    .line {
      margin: 0 20rpx;
      height: 40rpx;
      width: 1rpx;
      background-color: #d9d9d9;
    }

    .login-button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      font-size: 30rpx;
      background: #6c82f3;
      color: #fff;
      height: 100rpx;
      line-height: 100rpx;
      border-radius: 22rpx;
      box-shadow: 0 10rpx 14rpx 0 rgba(86, 119, 252, 0.2);
    }
    .login-wechat {
      font-size: 30rpx;
      color: #585858;
      background: #fdfdfd;
      width: 100%;
      box-shadow: 0 10rpx 14rpx 0 rgba(86, 119, 252, 0.2);
      margin-top: 30rpx;
      height: 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      image {
        height: 54rpx;
        width: 54rpx;
        margin-right: 20rpx;
      }
    }
  }
}
</style>
